<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        /* 
            设计图是375px    html标签的fs: 37.5

            750的屏   html标签的fs: 75    
            375的屏   html标签的fs: 37.5  在375屏上   盒子占1/10    w:1rem  h:1rem 
            320的屏   html标签的fs: 32
            414的屏   html标签的fs: 41.4

            适配：大屏上盒子显示大一点，小屏上盒子显示小一点
        */
        /* .box{
            width: 37.5px;
            height: 37.5px;
            background-color: gold;
        } */
        @media screen and (device-width:750px){
            html{
                font-size: 75px;
            }
        }
        @media screen and (device-width:414px){
            html{
                font-size: 41.4px;
            }
        }
        @media screen and (device-width:375px){
            html{
                font-size: 37.5px;
            }
        }
        @media screen and (device-width:320px){
            html{
                font-size: 32px;
            }
        }
        .box{
            width: 1rem;
            height: 1rem;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>